<template>
  <a-row class="table-list-box" :gutter="[20, 40]">
    <a-col v-for="item in data"  span="4">
      <MediaCard :model="item" :style="cardStyle" @click="onSelect(item)"/>
    </a-col>
  </a-row>
</template>
  
<script name="search-result" setup>
import MediaCard from './media-card.vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  cardStyle: {
      type: Object,
      default: () => ({})
  }
})

const onSelect = (item) => {
  emits('select', item)
}

const emits = defineEmits(['close', 'select'])

</script>

<style scoped>
.one-row-list-box {
  display: flex;
  width: 100%;
  overflow-x: hidden;
}
</style>